<!--
 * @页面: 门店会员充值排行（子弹图）
 * @描述:
 * @作者：赵涛
 * @日期: 2021-07-13 14:27:29
-->

<template>
  <div class="Bullet">
    <div class="num"
         v-if="this.count !== 0">
      本月达标门店：<span>{{ count }}</span>
    </div>
    <div class="chart"
         id="Bullet" />
  </div>
</template>

<script>
import { Bullet } from '@antv/g2plot'

export default {
  name: 'Bullet',
  data() {
    return {
      data: [],
      count: 1,
      color: 'white'
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.timer = setInterval(this.getData, 10000)
    this.draw()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      // 获取当日会员充值额数据
      this.$http({
        method: 'get',
        url: '/api/dataReport.ashx?action=!StoreRechargeTmp',
        data: {}
      }).then(res => {
        if (res.status === 200) {
          this.count = res.data.count
          const setObjFunc = (arr = res.data.dt) => {
            const baseArray = ['Amount', 'Ranges']
            arr.forEach(i => {
              baseArray.forEach(item => {
                i[item] = [i[item]]
              })
            })
            return arr
          }
          //   const newArr = this.arr.sort((a, b) => {
          //     return a - b
          //   })
          //   this.data = newArr
          this.data = setObjFunc()
          console.log('会员充值排行', this.data)
        }
      })
    },
    draw() {
      const bulletPlot = new Bullet('Bullet', {
        data: this.data,
        measureField: 'Amount',
        rangeField: 'Ranges',
        targetField: 'StandardAmount',
        xField: 'sName',
        autoFit: true,
        padding: [0, 0, 0, 70],
        color: {
          range: ['#30a2f8'],
          measure: '#30a2f8',
          target: 'white'
        },
        label: {
          measure: {
            position: 'middle',
            style: {
              fill: '#fff'
            }
          }
        },
        xAxis: {
          line: null,
          label: {
            style: {
              fill: this.color
            }
          }
        },
        yAxis: false,
        // 自定义 legend
        legend: false
      })
      bulletPlot.render()
      const interval = setInterval(() => {
        const newData = this.data
        if (newData) {
          bulletPlot.changeData(newData)
        } else {
          clearInterval(interval)
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.Bullet {
  width: 100%;
  height: 100%;
  .num {
    margin-top: 10px;
    height: 50px;
    padding: 10px;
    width: 100%;
    display: flex;
    // justify-content: center;
    align-items: center;
    font-size: 0.2rem;
    // border-bottom: 2px solid #2585a3;
    span {
      font-size: 0.5rem;
      font-family: 'DS-DIGIT';
      color: #ffeb7b;
    }
  }
  .chart {
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>
